<template>
  <div class="block" style="width: 1500px;margin: 0 auto">
    <el-row style="margin-top: 10px">
      <el-col span="24">
        <el-carousel height="800px">
          <el-carousel-item v-for="item in bannerArr">
            <img :src="item.bannerimgUrl" width="100%" height="100%">
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>

    <br>

    <el-row gutter="20">
      <el-col span="12">
        <div class="left">
          <h2 id="service">陪同就诊</h2>
          <p class="content">
            附加服务是陪诊邦为客户提供的额外服务，旨在为客户提供更全面、贴心的陪诊体验。其中包括上门接送、代借轮椅等服务。上门接送服务可以满足客户在出行方面的需求，无论是前往医院还是离开医院，都能提供便捷的接送服务。代借轮椅服务则是针对有行动不便或者需要休息的客户提供的服务，可以在医院内借用轮椅进行休息或者移动。除此之外，陪诊邦还提供其它附加服务，比如代买食物、代排队等等，可以根据客户的具体需求提供相应的服务。通过提供这些额外服务，陪诊邦希望能够让客户更加便利、舒适地完成陪诊，让客户感受到我们的关爱和专业。
          </p>
        </div>
      </el-col>
      <el-col span="12">
        <img class="pic" src="imgs/service1.png" style="float: left; width: 550px; height: 400px">
      </el-col>
    </el-row>

    <el-row gutter="20">
      <el-col span="12">
        <div class="left">
          <h2 >陪伴服务</h2>
          <p class="content">
            陪伴护理是陪诊邦为客户提供的一项重要服务，旨在为有照顾需求的患者提供高品质、专业的护理服务。我们的陪伴护理服务涵盖多种情况，如康复期护理、卧床患者照顾、长期护理等。我们的专业护理师会根据客户的需求和医生的要求提供定制化的护理方案，以确保患者能够得到最适合的照顾和治疗。我们的护理师具备丰富的护理经验和专业知识，能够为客户提供全面的护理服务，如测量体温、心率、血压、饮食调理、协助翻身、擦洗、照顾厕所、更换尿布等。在陪伴护理过程中，我们的护理师会与患者建立良好的沟通和信任关系，为患者提供温馨的陪伴和关怀。
          </p>
        </div>
      </el-col>
      <el-col span="12">
        <img class="pic" src="imgs/service2.png" style="float: left; width: 550px; height: 400px">
      </el-col>
    </el-row>

    <el-row gutter="20">
      <el-col span="12">
        <div class="left">

          <h2 >代办跑腿</h2>
          <p class="content">
            陪诊邦提供跑腿代办服务，这是为了更好地满足客户的需求，特别是那些因为身体原因不能亲自到医院或药店的人群。我们的跑腿代办服务包括代挂号、送取报告、代买药、代问诊等服务。我们会在客户指定的医院代为挂号，提前联系医院预约号源，避免客户的时间浪费。在送取报告方面，我们可以按照客户的要求代为取回检查报告，并在第一时间将结果反馈给客户。在代买药方面，我们可以为客户在指定的药店代购所需的药品，并负责将药品送达客户手中。在代问诊方面，我们可以代为客户进行初步的问诊，了解病情情况，为客户提供更好的就医建议。
          </p>
        </div>
      </el-col>
      <el-col span="12">
        <img class="pic" src="imgs/service3.jpg" style="float: left; width: 550px; height: 400px">
      </el-col>
    </el-row>

    <el-row gutter="20">
      <el-col span="12">
        <div class="left">

          <h2>附加业务</h2>
          <p class="content">
            附加服务是陪诊邦为客户提供的额外服务，旨在为客户提供更全面、贴心的陪诊体验。其中包括上门接送等服务。上门接送服务可以满足客户在出行方面的需求，无论是前往医院还是离开医院，都能提供便捷的接送服务。代借轮椅服务则是针对有行动不便或者需要休息的客户提供的服务，可以在医院内借用轮椅进行休息或者移动。除此之外，陪诊邦还提供其它附加服务，比如代买食物、代排队等等，可以根据客户的具体需求提供相应的服务。通过提供这些额外服务，陪诊邦希望能够让客户更加便利、舒适地完成陪诊过程，让客户感受到我们的关爱和专业。
          </p>
        </div>
      </el-col>
      <el-col span="12">
        <img class="pic" src="imgs/service4.jpg" style="float: left; width: 550px; height: 400px">
      </el-col>
    </el-row>
    <el-row gutter="10" style="margin-top: 80px;">
      <el-col span="20" offset="2">
        <el-row>
          <template>
            <div>
              <p id="niceperson" style="font-weight: bold;font-size: 20px;" align="center">优秀员工</p>
              <el-divider></el-divider>
            </div>
          </template>
        </el-row>
        <el-row>
          <el-col style="margin: 10px 0" span="4" v-for="item in niceperson">
            <el-card>
              <img :src="item.picImgeRul" width="100%" class="pic">
              <br>
              <br>
              <span style="font-weight: bold">{{item.username}}</span>
<!--              <p>我是优秀员工</p>-->
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import axios from "axios";
import TokenAxios from "@/http/TokenAxios";
import BaseUrl from "@/http/BaseUrl";

export default {
  data() {
    return {
      niceperson: [{username:"",picImgeRul:""}],
      bannerArr:[]
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      //key=index    keyPath是一个数组 装着路径
      console.log(key, keyPath);
    },
    List() {
      TokenAxios.post(BaseUrl.STAFF_USER+'/staffs/list')
          .then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state === 20000) {
              this.niceperson = jsonResult.data;
            }
          })
          .catch((error) => {
            console.error(error);
          });

  },
    bannerList(){
      axios.get(BaseUrl.BANNER+'/banners/').then((response)=>{
        if (response.data.state=20000){
          this.bannerArr=response.data.data;
        }
      })
    }
  },
  mounted() {
    this.List();
    this.bannerList();
  }
}
</script>

<style scoped>
.content{
  font-size: 20px;
}
.block {}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

body {
  line-height: 1.4; /*行高*/
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  font-family: 'Barlow-Bold', PingFang SC, Microsoft Yahei, Helvetica Neue, Arial;
}

.left {
  width: 500px;
  height: 400px;
  margin: 0 auto;
}


footer {
  display: block;
}

a {
  text-decoration: none;
}

#center_left_top_left img {
  position: absolute;
  top: 30px;
  width: 100px;
  height: 100px;
}

/*缩放动画相关*/
.pic {
  /*设置动画的持续时间*/
  transition-duration: 1s;
}

.pic:hover {
  /*设置图片缩放1.1倍*/
  transform: scale(1.1);
}
</style>
